<template>
  <view class="material-item shadow" :class="{'active': item.check * 1 === 1}">
    <view class="image" @click="goView(item)">
      <u--image width="100%" height="100%" :fade="true" duration="150" lazy-load mode="widthFix"
        :src="baseUrl + item.image[0]" v-if="item.image && item.image[0]" />
    </view>
    <view class="title two-lines" @click="goView(item)">{{item.title}}</view>
    <view class="desc">
      <view class="like">
        <view class="text">点赞: {{item.like}}</view>
      </view>
      <view class="fav">
        <view class="text">收藏: {{item.fav}}</view>
      </view>
      <view class="comment">
        <view class="text">评论: {{item.comment}}</view>
      </view>
    </view>
    <view class="status" v-if="item.check * 1 === 0">
      <view class="text">
        {{ '审核中' }}
      </view>
    </view>
    <view class="status" v-else-if="item.status * 1 !== 1">
      <view class="text">
        {{ item.status | statusText }}
      </view>
      <view class="ops">
        <view class="x" @click="reset(item)">打开</view>
        <view class="x" @click="remove(item)">删除</view>
      </view>
    </view>
    <view class="status" v-else>
      <view class="ops">
        <view class="x" @click="close(item)">关闭</view>
        <view class="x" @click="remove(item)">删除</view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../../config/config'


export default {
  props: ['item'],
  components: {
  },
  filters: {
    statusText(v) {
      let text = ''
      if (+v === 0) {
        text = '已关闭'
      }
      return text
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
    }
  },
  methods: {
    goView(item) {
      uni.navigateTo({
        url: `/sub_main/material/detail?id=${item.id}`
      })
    },
    reset(item) {
      this.$emit('reset', item)
    },
    close(item) {
      this.$emit('close', item)
    },
    remove(item) {
      uni.showModal({
        title: '确定要删除吗',
        success: result => {
          if (result.confirm) {
            this.$emit('remove', item)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.material-item {
  background: white;
  border-radius: 10rpx;
  padding: 20rpx 20rpx 10rpx 20rpx;
  position: relative;
  box-sizing: border-box;
  &.active {
    border: 1rpx solid #d1d1d1;
  }
  .desc {
    padding-bottom: 20rpx;
  }
  .title {
    line-height: 1.35em;
    color: #313131;
    //font-weight: 700;
    margin: 20rpx 0 10rpx 0;
    font-size: 26rpx;
  }
  .desc {
    display: flex;
    margin-top: 20rpx;
    align-items: center;
    justify-content: space-between;
    .like, .fav, .comment {
      .text {
        flex: 1;
        color: #616161;
        font-size: 24rpx;
      }
    }
  }
  .status {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0;
    .text {
      font-size: 24rpx;
      display: inline-block;
      background: $main_color;
      color: white;
      padding: 2.5rpx 7.5rpx;
    }
    .ops {
      display: flex;
      .x {
        font-size: 24rpx;
        display: inline-block;
        background: #313131;
        color: white;
        padding: 2.5rpx 7.5rpx;
        border-radius: 5rpx;
        margin: 0 10rpx;
      }
    }
  }
}
</style>
